<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../img/com/logo.png">
    <link rel="stylesheet" href="../asserts/css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/pageCom.css">
    <style>
        .top {
            display: flex;
            flex: 3;
        }
        .middle {
            display: flex;
            flex: 3;
        }
        .middle div{
            flex: 1;
        }
        .bottom {
            flex: 3;
            display: flex;
        }
        .top > div {
            flex: 1;
        }

        .bottom > div {
            flex: 1;
        }
    </style>
</head>
<body id="04_03pingtaijiaoyi." data-title="平台交易">
<div class="container">
    <h2 hidden>管理风险</h2>
    <header class="pageHeader">
        <div class="inputGroup">
            <label>平台：</label>
            <div class="mySelect" id="jingzhenglizhibiao4">
                <div class="myOption selected"><span class="text"></span><span class="icon"></span>
                </div>
                <ul class="myOptionBox">
                    <li class="myOption selected">鲁金宝1</li>
                    <li class="myOption">鲁金宝2</li>
                    <li class="myOption">鲁金宝3</li>
                </ul>
            </div>
        </div>
    </header>
    <div class="top">
        <!--平台成交量和成交额-->
        <div class="top-l">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>平台成交量和成交额</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_04_02currentCompetitiveness01"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--平均满标用时-->
        <div class="top-r">
            <div class="chartBox ec003">
                <div class="chartTitle">
                    <h3>平均满标用时</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_04_02currentCompetitiveness02"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="top">
        <!--平台投资人数和借款人数趋势-->
        <div class="top-l">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>平台投资人数和借款人数趋势</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_04_02currentCompetitiveness03"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--投资金额借款金额区间人数-->
        <div class="top-r">
            <div class="chartBox ec003">
                <div class="chartTitle">
                    <h3>投资金额借款金额区间人数</h3>
                </div>

                <div class="chartContent">
                    <div class="btnGroup">
                        <button class="active">借款人分级</button>
                        <button>投资人分级</button>
                    </div>
                    <div class="chartBody">
                        <div id="ec002_04_02currentCompetitiveness04"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <!--人均投资金额和人均借款金额-->
        <div class="bottom_l">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>人均投资金额和人均借款金额</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_04_02currentCompetitiveness05"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--资金流入-->
        <div class="bottom_m">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>资金流入</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_04_02currentCompetitiveness06"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--待偿本金-->
        <div class="bottom_r">
            <div class="chartBox ec001">
                <div class="chartTitle">
                    <h3>待偿本金</h3>
                </div>
                <div class="chartContent">
                    <div class="chartBody">
                        <div id="ec002_04_02currentCompetitiveness07"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../asserts/js/echarts-4.0.js"></script>
<script src="../asserts/js/jquery-2.2.4.js"></script>
<script src="../js/main.js"></script>
<script src="../js/chartsCom.js"></script>
<script>
    var allCharts = [];

    $(function () {
        //模块一
        var myChart1 = echarts.init($("#ec002_04_02currentCompetitiveness01")[0]);
        myChart1.setOption(opt_line);
        myChart1.setOption(opt_bar_vertical);
        myChart1.setOption({
            grid: {
                left: '5%',
                right: '8%',
                bottom: '18%',
                top: '30%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    nameGap: 18 * bodyScale
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '金额',
                    nameGap: 4 * bodyScale
                },
                {
                    type: 'value',
                    name: '笔数',
                    axisLine: { //坐标轴
                        lineStyle: {
                            color: "#369"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#369"
                        }
                    }
                }
            ],
            series: [
                {
                    name: '成交笔数',
                    type: 'bar',
                    data: [47, 56, 45, 57, 50, 55],
                    barWidth: barWidth
                },
                {
                    name: '成交金额',
                    type: 'line',
                    data: [34, 46, 41, 47, 33, 52],
                    symbol: 'circle',
                    yAxisIndex: 1
                }
            ]
        });
        //模块二
        var myChart2 = echarts.init($("#ec002_04_02currentCompetitiveness02")[0]);
        myChart2.setOption(opt_bar_horizon);
        myChart2.setOption(opt_line);
        myChart2.setOption({
            grid: {
                left: '5%',
                right: '5%',
                bottom: '18%',
                top: '20%'
            },
            legend:{
                show:false
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '时间',
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '投资额',
                    type: 'line',
                    data: [29, 31, 29, 34, 33, 40],
                    symbol: 'circle',
                    areaStyle: lineAreaStyle(0)
                }

            ]
        });
        //模块三
        var myChart3 = echarts.init($("#ec002_04_02currentCompetitiveness03")[0]);
        myChart3.setOption(opt_bar_horizon);
        myChart3.setOption(opt_line);
        myChart3.setOption({
            grid: {
                left: '5%',
                right: '5%',
                bottom: '18%',
                top: '20%'
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '人数',
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '平台投资人数',
                    type: 'line',
                    data: [60, 45, 39, 38, 47, 65],
                    symbol:'circle'
                },
                {
                    name: '平台借款人数',
                    type: 'line',
                    data: [29, 31, 29, 34, 33, 40],
                    symbol: 'circle'
                }
            ]
        });
        //模块四
        var myChart4 = echarts.init($("#ec002_04_02currentCompetitiveness04")[0]);
        myChart4.setOption(opt_bar_vertical);
        myChart4.setOption(opt_line);
        var data0_1 = [
            55,9,56,0.46,18,6,1

        ];
        var data1_10 = [
            [26,37,27,1.163,27,13,1],
            // [85,62,71,1.195,60,8,2]

        ];
        var data10_100 = [
            [55,9,56,0.46,18,6,1],
            // [25,11,21,0.65,34,9,2]
        ];
        var data100yishang = [
            [26,37,27,1.163,27,13,1],
            // [85,62,71,1.195,60,8,2]
        ];
        myChart4.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
                },
                position: function (pos, params, dom, rect, size) {
                    // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                    var obj = {top: 10};
                    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                    return obj;
                },
            },
            legend: {
                show:false
                // data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
            },
            grid: {
                left: '7%',
                right: '5%',
                bottom: '22%',
                top: '5%'
            },
            xAxis:  {
                name:'月份',
                type: 'category',
                data: [1,2,3,4,5,6]
            },
            yAxis: {
                type: 'value'

            },
            series: [
                {
                    name: '0-1万',
                    type: 'bar',
                    stack: '总量',
                    barWidth:barWidth,
                    data:[25,11,21,15,34,9,2]

                },
                {
                    name: '1-10万',
                    type: 'bar',
                    stack: '总量',
                    barWidth:barWidth,
                    data: [25,11,21,15,34,9,2]
                },
                {
                    name: '10-100万',
                    type: 'bar',
                    stack: '总量',
                    barWidth:barWidth,
                    data: [25,11,21,15,34,9,2]
                },
                {
                    name: '100以上',
                    type: 'bar',
                    stack: '总量',
                    barWidth:barWidth,
                    data: [25,11,21,15,34,9,2]
                }

            ]
        });
        //模块五
        var myChart5 = echarts.init($("#ec002_04_02currentCompetitiveness05")[0]);
        myChart5.setOption(opt_bar_horizon);
        myChart5.setOption(opt_line);
        myChart5.setOption({
            grid: {
                left: '10%',
                right: '10%',
                bottom: '18%',
                top: '20%'
            },
            legend:{
                show:false
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '金额',
                    type: 'value'
                }
            ],
            series: [
                {
                    type: 'line',
                    data: [29, 31, 29, 34, 33, 40],
                    symbol: 'circle'
                },

                {
                    type: 'line',
                    data: [26, 28, 26, 31, 30, 37],
                    symbol: 'circle'
                }
            ]
        });
        //模块六
      var myChart6 = echarts.init($("#ec002_04_02currentCompetitiveness06")[0]);
        myChart6.setOption(opt_bar_vertical);
        myChart6.setOption(opt_line);
        myChart6.setOption({
            legend: {
                show:false
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '18%',
                top:'15%'
            },
            xAxis : [

                {
                    type : 'category',
                    axisTick : {show: false},
                    data : [1,2,3,4,5,6],
                    name:'月份'
                }
            ],
            yAxis : [
                {   name:'金额',
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'收入',
                    type:'bar',
                    stack: '总量',
                    barWidth:barWidth,
                    data:[23, 34, 40, 44, 42, 37]
                },
                {
                    name:'支出',
                    type:'bar',
                    stack: '总量',
                    barWidth:barWidth,
                    data:[-23, -34, -40, -44, -42, -37]
                }
            ]
        });

        //模块七
        var myChart7 = echarts.init($("#ec002_04_02currentCompetitiveness07")[0]);
        myChart7.setOption(opt_bar_horizon);
        myChart7.setOption(opt_line);
        myChart7.setOption({
            grid: {
                left: '10%',
                right: '10%',
                bottom: '15%',
                top: '20%'
            },
            legend:{
                show:false
            },
            xAxis: [
                {
                    name: '月份',
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '金额',
                    type: 'value'
                }
            ],
            series: [
                {
                    type: 'line',
                    data: [29, 31, 29, 34, 33, 40],
                    symbol: 'circle',
                    areaStyle: lineAreaStyle(0)
                }
            ]
        });
        //本页所有图表
        allCharts = [myChart1, myChart2,myChart3,myChart4,myChart5,myChart6,myChart7];

    });


</script>
</body>
</html>
